<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="http://www.jq22.com/jquery/font-awesome.4.6.0.css">
		<link rel="stylesheet" href="css/animsition.min.css" />
		<link rel="stylesheet" href="css/drop-down.css" />
		<link rel="stylesheet" href="css/common.css" />
		<link rel="stylesheet" href="css/system.css" />
	</head>
	<body>
		
		<div class="data_wrap" style="background: #efeff5; width: 1020px; padding: 10px; overflow: hidden;">
		    <div class="animsition">
				<div style="background: white; solid #efeff5; width: 1020px; overflow: hidden;">
					<p id="my_date_set1">日期</p>
		    		<p id="my_date_set2">日期</p>
					<div id="main" style="height:350px; width: 700px; float: left;"></div>
					<div id="main2" style="height:350px; width: 320px; float: left;"></div>
					<div id="main3" style="height:350px; width: 1020px; clear: both; border-top: 10px solid #efeff5;"></div>
					<div id="main4" style="height:350px; width: 700px; float: left; border-top: 10px solid #efeff5;"></div>
					<div id="main5" style="height:350px; width: 320px; float: left;border-top: 10px solid #efeff5;"></div>
				</div>
				</div>
		    </div>
		</div>
		
		<script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
		<script src="http://www.jq22.com/jquery/jquery-ui-1.11.0.js"></script>
		<script src="js/select-widget-min.js"></script>
		<script src="js/jquery.animsition.min.js"></script>
		<script src="https://cdn.bootcss.com/echarts/3.5.3/echarts.min.js"></script>
		<script src="js/macarons .js"></script>
		<script src="js/common.js"></script>
		
		<script>
			$(document).ready(function() {
  			  //初始化切换
			  $(".animsition").animsition({
			  
			    inClass               :   'fade-in-right',
			    outClass              :   'fade-out',
			    inDuration            :    1500,
			    outDuration           :    800,
			    linkElement           :   '.animsition-link',
			    // e.g. linkElement   :   'a:not([target="_blank"]):not([href^=#])'
			    loading               :    true,
			    loadingParentElement  :   'body', //animsition wrapper element
			    loadingClass          :   'animsition-loading',
			    unSupportCss          : [ 'animation-duration',
			                              '-webkit-animation-duration',
			                              '-o-animation-duration'
			                            ],
			    //"unSupportCss" option allows you to disable the "animsition" in case the css property in the array is not supported by your browser.
			    //The default setting is to disable the "animsition" in a browser that does not support "animation-duration".
			    
			    overlay               :   false,
			    
			    overlayClass          :   'animsition-overlay-slide',
			    overlayParentElement  :   'body'
			  });
			  
			   // 基于准备好的dom，初始化echarts实例
		        var myChart = echarts.init(document.getElementById('main'),'macarons');
				var myChart2 = echarts.init(document.getElementById('main2'),'macarons');
				var myChart3 = echarts.init(document.getElementById('main3'),'macarons');
				var myChart4 = echarts.init(document.getElementById('main4'),'macarons');
				var myChart5 = echarts.init(document.getElementById('main5'),'macarons');
		        // 指定图表的配置项和数据
				var date = ['2016/11/1','2016/11/2','2016/11/3','2016/11/4','2016/11/5','2016/11/6','2016/11/7','2016/11/8','2016/11/9','2016/11/10',
				'2016/11/11','2016/11/12','2016/11/13','2016/11/14','2016/11/15','2016/11/16','2016/11/17','2016/11/18'
				,'2016/11/19','2016/11/20','2016/11/21','2016/11/22','2016/11/23','2016/11/24','2016/11/25','2016/11/26','2016/11/27'
				,'2016/11/28','2016/11/29','2016/11/30'];
				
				
				function my_data(){
					var data = [];
					for( var i =0; i<30; i++){
						data.push(Math.round(Math.random() * (500 - 100) + 100));
					};
					return data;
				}
				var option = {
				    tooltip: {
				        trigger: 'axis',
				        /*formatter: function(data){
				        	//console.log(data)
				        	 myChart.setOption({
						        title : {
							        text: '会员数量' + data.value,
							    }
						    });
							
						   return data.name + '</br>' + '新增数：' + data.value + '</br>';
						}*/
				        
				    },
				    title: {
				        text: '会员数量：1000',
				        /*subtext: '昨日新增：',
				        subtextStyle: {
							fontSize:14,
							color : '#ff4a84'
						}*/
				    },
				    
				    toolbox: {
				        show : true,
				         feature : {
				            mark : {show: true},
				            dataView : {show: true, readOnly: true},
				            magicType : {show: true, type: ['line', 'bar']},
				            restore : {show: true},
				            saveAsImage : {}
				        }
				    },
				    calculable : true,
				    xAxis: {
				        type : 'category',
				        boundaryGap : false,
				        data : date
				    },
				    yAxis: {
				        type: 'value',
				        boundaryGap: [0, '100%']
				    },
				    dataZoom: [{
				        type: 'inside',
				        start: 84,
				        end: 100
				    }, {
				        start: 84,
				        end: 100,
				        handleSize: '80%',
				        handleStyle: {
				            color: '#fff',
				            shadowBlur: 3,
				            shadowColor: 'rgba(0, 0, 0, 0.6)',
				            shadowOffsetX: 2,
				            shadowOffsetY: 2
				        }
				    }],
				    series: [
				        {
				            name:'新增数',
				            type:'line',
				            smooth:true,
				            itemStyle: {
				                normal: {
				                    color: 'rgb(255, 70, 131)'
				                }
				            },
				            areaStyle: {
				                normal: {
				                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
				                        offset: 0,
				                        color: 'rgb(255, 158, 68)'
				                    }, {
				                        offset: 1,
				                        color: 'rgb(255, 70, 131)'
				                    }])
				                }
				            },
				            data : my_data()
				        }
				    ]
				};

				var option2 = {
				    tooltip: {
				        trigger: 'item',
				        formatter: function(data){
				        	//console.log(data)
							 myChart.setOption({
						        title : {
							        text: '会员数量' + data.value,
							    }
						    });
							return data.name + '</br>' + '人数：' + data.value + '</br>占比：' + data.percent + '%'+'</br>';
						}
				    },
				    toolbox: {
				        show : true,
				         feature : {
				            mark : {show: true},
				            dataView : {show: true, readOnly: false},
				            restore : {show: true},
				            saveAsImage : {show: true}
				        }
				    },
				    legend: {
				    	orient: 'horizontal', // 'vertical'
				    	icon:'pie',
				       // orient: 'vertical',
				        x: 'right',
				        y: 'bottom',
				        selectedMode:true,
				        data:['准会员','普通会员','高级会员','VIP会员','超级VIP会员']
				    },
				    series: [
				        {
				            name:'各级别会员人数',
				            center:['50%','50%'],
				            type:'pie',
				            radius: ['50%', '65%'],
				            avoidLabelOverlap: false,
				            label: {
				                normal: {
				                    show: false,
				                    position: 'center',
				                },
				                emphasis: {
				                    show: true,
				                    textStyle: {
				                        fontSize: '20',
				                        fontWeight: 'bold'
				                    }
				                }
				            },
				            labelLine: {
				                normal: {
				                    show: false
				                }
				            },
				            data:[
				                {value:335, name:'准会员'},
				                {value:310, name:'普通会员'},
				                {value:234, name:'高级会员'},
				                {value:135, name:'VIP会员'},
				                {value:1548, name:'超级VIP会员'}
				            ]
				        }
				    ]
				};
				var option3 = {
				    title : {
				        text: '各级别会员变迁情况'
				    },
				    tooltip : {
				        trigger: 'axis',
				        /* axisPointer : {            // 坐标轴指示器，坐标轴触发有效
				            type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
				        }*/
				    },
				    legend: {
				        data:['普通会员','高级会员','VIP会员','超级VIP会员']
				    },
				    toolbox: {
				        show : true,
				        feature : {
				            mark : {show: true},
				            dataView : {show: true, readOnly: false},
				            magicType : {show: true, type: ['line', 'bar', 'stack', 'tiled']},
				            restore : {show: true},
				            saveAsImage : {show: true}
				        }
				    },
				    calculable : true,
				    xAxis : [
				        {
				            type : 'category',
				            boundaryGap : true,
				            data : date
				        }
				    ],
				    yAxis : [
				        {
				            type : 'value'
				        }
				    ],
				     grid: {
				        left: '3%',
				        right: '4%',
				        containLabel: true
				    },
				    dataZoom: [{
				        type: 'inside',
				        start: 74,
				        end: 100,
				    }, {
				        start: 74,
				        end: 100,
				        handleSize: '80%',
				        handleStyle: {
				            color: '#fff',
				            shadowBlur: 3,
				            shadowColor: 'rgba(0, 0, 0, 0.6)',
				            shadowOffsetX: 2,
				            shadowOffsetY: 2
				        }
				    }],
				    series : [
				        {
				            name:'普通会员',
				            type:'bar',
				            stack: '总量',
				            barMaxWidth : 30,
				            //itemStyle: {normal: {areaStyle: {type: 'default'}}},
				            data:my_data()
				        },
				        {
				            name:'高级会员',
				            type:'bar',
				            stack: '总量',
				            //itemStyle: {normal: {areaStyle: {type: 'default'}}},
				            data:my_data()
				        },
				        {
				            name:'VIP会员',
				            type:'bar',
				            stack: '总量',
				            //itemStyle: {normal: {areaStyle: {type: 'default'}}},
				            data:my_data()
				        },
				        {
				            name:'超级VIP会员',
				            type:'bar',
				            stack: '总量',
				            //itemStyle: {normal: {areaStyle: {type: 'default'}}},
				            data:my_data()
				        }
				    ]
				};
				var option4 = {
				    tooltip: {
				        trigger: 'axis',
				    },
				    title: {
				        text: '新老顾客数量',
				        /*subtext: '昨日新增：',
				        subtextStyle: {
							fontSize:14,
							color : '#ff4a84'
						}*/
				    },
				    
				    toolbox: {
				        show : true,
				         feature : {
				            mark : {show: true},
				            dataView : {show: true, readOnly: false},
				            magicType : {show: true, type: ['line', 'bar', 'stack', 'tiled']},
				            restore : {show: true},
				            saveAsImage : {show: true}
				        }
				    },
				    legend: {
				        data:['新会员','老会员','潜客']
				    },
				    calculable : true,
				    xAxis: {
				        type : 'category',
				        boundaryGap : false,
				        data : date
				    },
				    yAxis: {
				        type: 'value',
				        boundaryGap: [0, '100%']
				    },
				    dataZoom: [{
				        type: 'inside',
				        start: 84,
				        end: 100
				    }, {
				        start: 84,
				        end: 100,
				        handleSize: '80%',
				        handleStyle: {
				            color: '#fff',
				            shadowBlur: 3,
				            shadowColor: 'rgba(0, 0, 0, 0.6)',
				            shadowOffsetX: 2,
				            shadowOffsetY: 2
				        }
				    }],
				    series: [
				        {
				            name:'新会员',
				            type:'line',
				            smooth:false,
				            stack: '总量',
				            itemStyle: {normal: {areaStyle: {type: 'default'}}},
				            data:my_data()
				        },
				        {
				            name:'老会员',
				            type:'line',
				            stack: '总量',
				            smooth:true,
				            itemStyle: {normal: {areaStyle: {type: 'default'}}},
				            data:my_data()
				        },
				        {
				            name:'潜客',
				            type:'line',
				            stack: '总量',
				            smooth:true,
				            itemStyle: {normal: {areaStyle: {type: 'default'}}},
				            data:my_data()
				        }
				    ]
				};

				var option5 = {
				    tooltip: {
				        trigger: 'item',
				        formatter: function(data){
				        	//console.log(data)
							 myChart.setOption({
						        title : {
							        text: '会员数量' + data.value,
							    }
						    });
							return data.name + '</br>' + '人数：' + data.value + '</br>占比：' + data.percent + '%'+'</br>';
						}
				    },
				    toolbox: {
				        show : true,
				         feature : {
				            mark : {show: true},
				            dataView : {show: true, readOnly: false},
				            restore : {show: true},
				            saveAsImage : {show: true}
				        }
				    },
				    legend: {
				    	orient: 'horizontal', // 'vertical'
				    	icon:'pie',
				       // orient: 'vertical',
				        x: 'right',
				        y: 'bottom',
				        selectedMode:true,
				        data:['新会员','老会员','潜客']
				    },
				    series: [
				        {
				            name:'各级别会员人数',
				            center:['50%','50%'],
				            type:'pie',
				            radius: ['50%', '65%'],
				            avoidLabelOverlap: false,
				            label: {
				                normal: {
				                    show: false,
				                    position: 'center'
				                },
				                emphasis: {
				                    show: true,
				                    textStyle: {
				                        fontSize: '20',
				                        fontWeight: 'bold'
				                    }
				                }
				            },
				            labelLine: {
				                normal: {
				                    show: false
				                }
				            },
				            data:[
				                {value:335, name:'新会员'},
				                {value:310, name:'老会员'},
				                {value:210, name:'潜客'}
				            ]
				        }
				    ]
				};                    
				
				
		        // 使用刚指定的配置项和数据显示图表。
		        myChart.setOption(option);
			 	myChart2.setOption(option2);
			 	myChart3.setOption(option3);
			 	myChart4.setOption(option4);
			 	myChart5.setOption(option5);
			 	
			 	myChart.on('mousemove',function(params){ // 控制台打印数据的名称 
			 		$('#my_date_set1').html(params.name);
					myChart2.clear();
					option2.series[0].data = [
						{value:900, name:'准会员'},
						{value:150, name:'普通会员'},
						{value:150, name:'高级会员'},
						{value:150, name:'VIP会员'},
						{value:150, name:'超级VIP会员'}
					];
					myChart2.setOption(option2,true);
					/*myChart2.setOption({
				        series: [
					        {
					            data:[
					                {value:100, name:'准会员'},
					                {value:310, name:'普通会员'},
					                {value:234, name:'高级会员'},
					                {value:135, name:'VIP会员'},
					                {value:params.value, name:'超级VIP会员'}
					            ]
					        }
					    ]
				    });*/
			 	});
			 	myChart4.on('mousemove',function(params){ // 控制台打印数据的名称 
			 		$('#my_date_set2').html(params.name)
					myChart5.setOption({
				        series: [
					        {
					            data:[
					                {value:params.value, name:'新会员'},
				                	{value:310, name:'老会员'},
				                	{value:210, name:'潜客'}
					            ]
					        }
					    ]
				    });
			 	});
			 	
			});
		</script>
	</body>
</html>
